<template>
	<view class="content">
		<view class="bacFFF wid100 dis" style="height: 88rpx;">
			<view class="wid25" @click="xuanze(0)"
				:style="wif == 0?'color: #D06000;':'color: #6A6A6A;'">
				<view class="dis disAl disJuC hei80">全部订单</view>
				<view class="mar" style="width: 80rpx;height: 8rpx;" :style="wif == 0?'background-color: #D06000;':''"></view>
			</view>
			<view class="wid25" @click="xuanze(1)" 
				:style="wif == 1?'color: #D06000;':'color: #6A6A6A;'">
				<view class="dis disAl disJuC hei80">未支付</view>
				<view class="mar" style="width: 80rpx;height: 8rpx;" :style="wif == 1?'background-color: #D06000;':''"></view>
			</view>
			<view class="wid25" @click="xuanze(2)" 
				:style="wif == 2?'color: #D06000;':'color: #6A6A6A;'">
				<view class="dis disAl disJuC hei80">已支付</view>
				<view class="mar" style="width: 80rpx;height: 8rpx;" :style="wif == 2?'background-color: #D06000;':''"></view>
			</view>
			<view class="wid25" @click="xuanze(3)"
				:style="wif == 3?'color: #D06000;':'color: #6A6A6A;'">
				<view class="dis disAl disJuC hei80">已完成</view>
				<view class="mar" style="width: 80rpx;height: 8rpx;" :style="wif == 3?'background-color: #D06000;':''"></view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 88rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 40rpx;"></view>
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar bacFFF borRad10 mar-bott30" style="padding: 30rpx 0;">
					<view class="wid90 mar">
						<view class="dis disAl disJuB mar-bott10">
							<view class="foSi35" style="color: #505050;">放生鱼品种：{{item.goods.name}}</view>
							<view v-if="item.is_pay != 2" class="foSi25" style="text-align: end;">{{item.is_pay == 0?'未支付':'已支付'}}</view>
							<view v-if="item.is_pay == 2" class="foSi25" style="text-align: end;color: #D06000;">已完成</view>
						</view>
						<view class="foSi40 fowe600" style="">{{item.name}}</view>
						<view class="foSi35 mar-top20 mar-bott10" style="color: #505050;">放生留言:</view>
						<view class="dis disAl disJuB">
							<view class="foSi40 fowe600 webkitLineClamp" style="width: 75%;">{{item.note}}</view>
							<view class="foSi45 fowe600" style="color: #C38D5F;line-height: 66rpx;">¥{{item.money}}</view>
						</view>
						<view class="dis disAl disJuB mar-top10 foSi25 coFFF">
							<view style="color: #5A5959;">放生时间：{{item.createtime | formatDate}}</view>
							<view v-if="item.is_pay == 0" class="dis disAl disJuC borRad10 xq1"
								@click="zhifu(item.id)">立即支付</view>
							<view v-if="item.is_pay == 2" class="dis disAl disJuC borRad10 xq" 
								@click="tiaozhuan('/pages/orderForm/particulars?id='+item.id)">查看详情</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="list.length == 0" style="height: 140rpx;background-color: #F4EDDD;color: #888;"
				class="dis disAl disJuC">暂无数据</view>
			<view v-if="last_page==0 && list.length > 0" style="height: 140rpx;background-color: #F4EDDD;color: #888;"
				class="dis disAl disJuC">正在加载中...</view>
			<view v-if="last_page==1&& list.length > 0" style="height: 140rpx;background-color: #F4EDDD;color: #888;"
				class="dis disAl disJuC">已经到底了</view>
			<view style="height: 20rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	export default {
		data() {
			return {
				wif: 0,
				page: 1,
				last_page: 0,
				list: []
			}
		},
		onLoad() {
			this.alioss()
			this.getOrder()
		},
		methods: {
			alioss(){
				var that  = this;
				uni.request({
				    // http://jufeng.tengshuokeji.cn//yonghu/order/order_comments
				    url: that.global.url + '/api/index/alioss',
				    method: "POST",
				    data: {},
				    success(res) {
				        let result = res.data
				        console.log(result)
				        if (result.code == 1) {
				            that.global.ossurl = result.data
							console.log(that.global.ossurl);
							that.ossurl = that.global.ossurl;
				        }
				    }
				})
			},
			zhifu(id){
				let that = this 
				uni.showLoading({
					title:'支付中...'
				})
				// #ifdef H5
				var method = 'mp'
				// #endif
				// #ifdef MP-WEIXIN
				var method = 'miniapp'
				// #endif
				uni.request({
					url: that.global.url + '/api/order/order_zhifu_pay',
					method: 'POST',
					header: {
						"token": uni.getStorageSync('token')
					},
					data: {
						method: method,
						id:id,
						openid: uni.getStorageSync('openid')
					},
					success: (res) => {
						let result = res.data
						if (result.code == 1) {
							console.log(result.data)
							if(method == 'mp'){
								jweixin.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: result.data.appId, // 必填，公众号的唯一标识
									timestamp: result.data.timeStamp, // 必填，生成签名的时间戳
									nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
									signature: result.data.paySign, // 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								})
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										appId: result.data.appId,
										package: result.data.package, //
										timestamp: result.data.timeStamp, // 时间戳
										nonceStr: result.data.nonceStr, // 随机数
										signType: result.data.signType,
										paySign: result.data.paySign, // 签名
										success: function() {
											// 支付成功
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														that.page = 1
														that.getOrder()
													}
												}
											})
										},
										cancel: function() {
											// 支付失败
											console.log(res) 
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 2000
											})
										},
										fail: function() {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								})
							}else{
								uni.requestPayment({
								    provider: 'wxpay',
									timeStamp: result.data.timeStamp,
									nonceStr: result.data.nonceStr,
									package: result.data.package,
									signType: 'MD5',
									paySign: result.data.paySign,
									success: function (res) {
										console.log(res);
										uni.showModal({
											title: '提示',
											content: '支付成功',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													that.page = 1
													that.getOrder()
												}
											}
										})
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
											// 支付失败
										console.log(err)
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										})
									}
								});
							}
						}else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			getOrder(){
				var that = this
				uni.request({
					url: that.global.url+'/api/Order', 
					data: {
						type: 2,
						is_pay: that.wif == 1?0:that.wif == 2?1:that.wif == 3?2:'',
						page: this.page,
						size: 10
					},
					header: {
						 'Content-Type': 'application/json' ,//自定义请求头信息
						 'token':uni.getStorageSync('token')
					},
					method:'POST',//请求方式，必须为大写
					success: (res) => {
					    let result = res.data
					    if(result.code == 1){
							console.log(result.data);
							that.last_page = result.data.num
							if(that.page == 1){
								that.list = result.data.list
							}else{
								that.list = that.list.concat(result.data.list)
							}
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					}
				})
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				})
			},
			xuanze(index){
				this.wif = index
				this.page = 1
				this.getOrder()
			},
			lower(e) {
				if(this.last_page == 0){
					this.page++
					this.getOrder()
				}
			},
		},
		filters: {
			formatDate(value) {
				let date = new Date(value * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d; //年月日
				// return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
		
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4EDDD;
	}
	.xq{
		background-color: #C38D5F;
		width: 130rpx;
		height: 50rpx;
	}
	.xq1{
		background-color: #F88607;
		width: 130rpx;
		height: 50rpx;
	}
</style>
